<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="login-wrapper">
		<div class="header_login">
	        <a class="logo icon-logo--login" href="#" title="西宁市民生货币化资金监管查询系统">西宁市民生货币化资金监管查询系统</a>
	        <div class="header_login_info">
	            <a href="javascript:;" class="download">
	            	客户端下载
	            	<span style="display: none;"><img src="http://img30.ddimg.cn/upload_img/00363/header/go_erweima.png" alt=""></span>
	            </a>
	            <a href="javascript:;" class="feedback">反馈</a>
	            <a href="javascript:;">帮助</a>
	        </div>
	    </div>
		<div class="form-area-wrapper">
			<div class="title">账号登录</div>
			<div class="form-wrapper">
				<div class="ant-row input-tip-text error">
					<p><span>请确认密码输入正确</span></p>
				</div>
				<div class="ant-row input-wrapper">
					<div class="ant-row ant-form-item">
						<div class="ant-form-item-control has-success">
							<div class="flex flex-justify-start flex-align-stretch">
								<div class="flex-item flex-align-center"><i class="x-icon x-icon-user"></i></div>
								<div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="text" name="username" placeholder="请输入用户名" value="" class="ant-input">
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="ant-row ant-form-item ant-form-item-with-help">
						<div class="ant-form-item-control has-success">
							<div class="flex flex-justify-start flex-align-stretch">
								<div class="flex-item flex-align-center"><i class="x-icon x-icon-lock"></i></div>
								<div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="text" name="password" placeholder="请输入密码" value="" class="ant-input">
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="ant-row ant-form-item">
						<div class="ant-form-item-control has-success">
							<div class="flex flex-justify-start flex-align-stretch">
								<div class="flex-item flex-align-center"><i class="x-icon x-icon-uncertified"></i></div>
								<div class="flex-item flex-align-center" style="-webkit-flex:2 0 auto;flex:2 0 auto;">
									<span class="ant-input-wrapper">
										<input type="text" name="username" placeholder="请输入验证码" value="" class="ant-input">
									</span>
								</div>
								<div class="flex-item flex-align-center" style="position: absolute;right: 0;top: 0;">
                                    <img src="images/1.jpg" alt="" class="code">
                                </div>
							</div>
						</div>
					</div>
				</div>
				<button type="submit" class="ant-btn ant-btn-danger submit-button"><span>登 录</span></button>
				<div class="ant-row-flex ant-row-flex-space-between ant-row-flex-middle links">
					<div class="ant-col-12">
						<a href="javascript:;" class="forgot">
							<span>忘记密码?</span>
						</a>
					</div>
					<!-- <div class="ant-col-12">
						<a href="#"><span>注册 </span><i class="x-icon x-icon-circle-o-right"></i></a>
					</div> -->
				</div>
			</div>
		</div>
	</div>
	<div class="footerOut">
        <div class="footerOutBg"></div>
        <div class="m footer f12">
            <div class="l">
                <a href="#" target="_blank">关于我们</a>
                <br>
                Copyright © 2016 青海云联数据服务有限公司
            </div>
            <div class="r">
                <span> </span>
                <br>
                <a href="#" target="_blank">青海ICP备88888888号</a>
            </div>
        </div>
        <!--页尾end-->
    </div>
    <div class="feedback-box fix-box">
    	<div class="shadow"></div>
    	<div class="ant-modal">
    		<div class="ant-modal-content">
    			<button aria-label="Close" class="ant-modal-close close">×</button>
    			<div class="ant-modal-header">
    				<div class="ant-modal-title">用户反馈</div>
    			</div>
	    		<div class="ant-modal-body">
	    			<div class="ant-row" style="padding-top: 20px;">
	    				<div class="ant-col-5">问题标题</div>
	    				<div class="ant-col-19"><input type="text" value="" class="ant-input title-wt" name="title"></div>
	    			</div>
	    			<div class="ant-row">
	    				<div class="ant-col-5">反馈人姓名</div>
	    				<div class="ant-col-6"><input type="text" value="" class="ant-input name" name="name"></div>
	    				<div class="ant-col-5 w70">联系方式</div>
	    				<div class="ant-col-6"><input type="text" value="" class="ant-input tel" name="tel"></div>
	    				<div class="ant-col-5 w70">所在单位</div>
	    				<div class="ant-col-6"><input type="text" value="" class="ant-input company" name="company"></div>
	    			</div>
	    			<div class="ant-row">
	    				<div class="ant-col-5">详细描述</div>
	    				<div class="ant-col-19"><textarea value="" class="ant-input content" name="content"></textarea></div>
	    			</div>
	    		</div>
	    		<div class="ant-modal-footer">
	    			<button type="button" class="ant-btn ant-btn-lg close"><span>取消</span></button>
	    			<button type="button" class="ant-btn ant-btn-primary ant-btn-lg save"><span>确定</span></button>
	    		</div>
    		</div>
    	</div>
    </div>
    <div class="msg-box fix-box">
    	<div class="shadow"></div>
    	<div class="ant-modal">
    		<div class="ant-modal-content">
	    		<div class="ant-modal-body">
	    			<div class="ant-row">
	    				请联系管理员修改
	    			</div>
	    			<button type="button" class="ant-btn ant-btn-primary ant-btn-lg msg-close"><span>关闭</span></button>
	    		</div>
    		</div>
    	</div>
    </div>
    <div class="tip"></div>
	<script src="js/jquery-1.8.2.min.js"></script>
	<script src="js/supersized.3.2.7.min.js"></script>
	<script>
jQuery(function($){
    $.supersized({
        // Functionality
        slide_interval     : 4000,    // Length between transitions
        transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed   : 1000,    // Speed of transition
        performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

        // Size & Position
        min_width          : 0,    // Min width allowed (in pixels)
        min_height         : 0,    // Min height allowed (in pixels)
        vertical_center    : 1,    // Vertically center background
        horizontal_center  : 1,    // Horizontally center background
        fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
        fit_portrait       : 1,    // Portrait images will not exceed browser height
        fit_landscape      : 0,    // Landscape images will not exceed browser width

        // Components
        slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
        slides             : [    // Slideshow Images
                                 {image : 'images/1.jpg'},
                                 {image : 'images/2.jpg'},
                                 {image : 'images/3.jpg'},
                                 {image : 'images/4.jpg'},
                                 {image : 'images/5.png'}
                       ]
    });
    $('.download').hover(function(){
    	$(this).find('span').stop(true, false).fadeIn(500);
    }, function(){
    	$(this).find('span').stop(true, false).fadeOut(500);
    })
    $('.feedback').click(function(){
    	$('.feedback-box').show();
    });
    $('.feedback-box .close').click(function(){
    	$('.feedback-box').hide();
    });
    var clearInput = function(){
    	$('.title-wt').val("");
    	$('.name').val("");
    	$('.tel').val("");
    	$('.company').val("");
    	$('.content').val("");
    }
    var time = null
    var showTip = function(msg){
    	clearTimeout(time);
    	$('.tip').html(msg).fadeIn(200);
    	time = setTimeout(function(){
    		$('.tip').fadeOut(1000);
    	},2000);
    }
    $('.save').click(function(){
    	var title = $('.title-wt').val();
    	var name = $('.name').val();
    	var tel = $('.tel').val();
    	var company = $('.company').val();
    	var content = $('.content').val();
    	if(!title){
    		showTip("请填写标题");
    		return false;
    	}
    	if(!content){
    		showTip("请填写内容");
    		return false;
    	}
    	$.ajax({
	        url: '/feedback/save',
	        type: 'post',
	        dataType: 'json',
	        data: {
	        	title: title,
	        	name: name,
	        	tel: tel,
	        	company: company,
	        	content: content
	        },
	        success: function(data){
	        	if(data.status){
		        	showTip("反馈成功！");
			    	clearInput();
			    	$('.feedback-box').hide();
		        }else{
		        	showTip("反馈失败！");
		        }
	        },
	        error: function(){
	        	showTip("请求失败！");
	        }
	    });
    });
    $('.forgot').click(function(){
    	$('.msg-box').show();
    });
    $('.msg-box .msg-close').click(function(){
    	$('.msg-box').hide();
    });
});
	</script>
</body>
</html>